<template>
	<div class="movie-container">
		<div class="header">
			<div class="text-container">
				<div class="first-title">
					数据统计
				</div>
			</div>
		</div>
		<div class="body">
			<div class="box left-box">
				<div class="box-item">
					<div class="box-item-title">
						<span>年月分析</span>
					</div>
					<div class="box-item-chart">
						<div style="text-align: right;">
							<RadioGroup v-model="ratio" type="button" button-style="solid" size="small">
								<Radio label="年"></Radio>
								<Radio label="月"></Radio>
							</RadioGroup>

							<DatePicker style="width: 120px;" v-if="ratio == '月'" type="year" size="small" :value="year" placeholder="请选择年份">
							</DatePicker>
						</div>
						<div class="chart" id="chart-1"></div>
					</div>
				</div>
				<div class="box-item">
					<div class="box-item-title">
						<span>国家/地区分析</span>
					</div>
					<div class="box-item-chart">
						<div style="text-align: right;">
							<Select v-model="country" multiple style="width: 160px;" size="small" :max-tag-count="1">
								<Option v-for="item in countryList" :value="item" :key="item">
									{{ item }}
								</Option>
							</Select>
						</div>
						<div class="chart" id="chart-2"></div>
					</div>
				</div>
			</div>
			<div class="box center-box">
				<div class="top-container">
					<div class="data-row">
						<div class="data-col" v-for="item in scoreList">
							<img :src="item.img" alt="">
							<div class="score-box-item-title">{{ item.title }}</div>
							<div class="score-box-item-value">{{ item.value }}</div>
						</div>
					</div>
				</div>
				<div class="carousel-box">
					<Carousel autoplay-speed="5000" dots="none" v-model="carouselValue" loop>
						<CarouselItem v-for="item in carouselList" :key="item.src">
							<div class="demo-carousel">
								<div class="overlay-1"></div>
								<div class="overlay-2"></div>
								<img :src="item.src" alt="" />
							</div>
						</CarouselItem>
					</Carousel>
				</div>
			</div>
			<div class="box right-box">
				<div class="box-item">
					<div class="box-item-title">
						<span>类型分析</span>
					</div>
					<div class="box-item-chart">
						<div style="text-align: right;">
							<Select v-model="category" multiple style="width: 160px;" size="small" :max-tag-count="1">
								<Option v-for="item in categoryList" :value="item" :key="item">
									{{ item }}
								</Option>
							</Select>
						</div>
						<div class="chart" id="chart-4"></div>
					</div>
				</div>
				<div class="box-item">
					<div class="box-item-title">
						<span>最佳主演TOP10</span>
					</div>
					<div class="box-item-chart">
						<div class="chart" id="chart-3"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import dataOverview from "./dataOverview";
	export default {
		...dataOverview,
	};
</script>

<style>
	.movie-container {
		width: 100vw;
		height: 100vh;
		background: url("../../assets/movies/bg-new.jpg") center no-repeat;
		background-size: cover;
	}

	.header {
		width: 100vw;
		height: 8vh;
		line-height: 7vh;
		color: #fff;
		font-size: 24px;
		text-align: center;
		background: url("../../assets/movies/header-bg.png") center no-repeat;
		background-size: cover;
	}


	.body {
		width: 100%;
		height: 90vh;
		padding: 2vh 4vh 0;
		display: flex;
		justify-content: space-between;
	}

	.box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 28%;
		height: 100%;
	}

	.center-box {
		width: 42%;
	}

	.box-item {
		height: 49%;
	}

	.box-item-title {
		height: 32px;
		background: url("../../assets/movies/classify-header-bg.png") center no-repeat;
		background-size: cover;
		line-height: 32px;
	}

	.box-item-title span {
		font-size: 18px;
		font-weight: 600;
		background-image: linear-gradient(180deg, #f8fdff, #abe2ff);
		color: transparent;
		-webkit-background-clip: text;
		letter-spacing: 2px;
		text-align: left;
	}

	.top-container {
		height: 327px;
		width: 100%;
		margin: 0 auto;
		background: url("../../assets/movies/center-top-bg.png") center no-repeat;
		background-size: 100% 101%;
		padding: 12px 32px 32px;
	}

	.data-row {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		margin-top: 14px;
	}

	.data-col {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 24%;
		height: 100%;
	}

	.data-col img {
		width: 100%;
		height: 65%;
	}

	.score-box-item-title {
		color: #bbbbbb;
		font-weight: bold;
		font-size: 18px;
	}

	.score-box-item-value {
		font-family: fantasy;
		font-size: 24px;
		font-weight: 600;
		line-height: normal;
		text-align: center;
		letter-spacing: 0px;
		font-feature-settings: "kern" on;
		background: linear-gradient(180deg, #FFFFFF 0%, #F9CD80 97%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.carousel-box {
		width: 100%;
	}

	.demo-carousel {
		width: 100%;
		height: 500px;
		overflow: hidden;
		/* 防止图片溢出容器 */
		position: relative;
	}

	.demo-carousel img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.overlay-1 {
		position: absolute;
		width: 100%;
		height: 200px;
		top: 0px;
		opacity: 1;
		background: linear-gradient(0deg,
				rgba(25, 24, 37, 0) 0%,
				rgba(25, 24, 37, 0.3) 33.85%,
				rgba(25, 24, 37, 0.9) 100%);
	}

	.overlay-2 {
		position: absolute;
		width: 100%;
		height: 300px;
		bottom: 0px;
		opacity: 1;
		background: linear-gradient(0deg,
				rgba(0, 0, 0, 1) 0%,
				rgba(25, 24, 37, 0.7) 55.85%,
				rgba(25, 24, 37, 0) 100%);
	}

	.chart {
		width: 100%;
		height: 36vh;
	}
</style>